<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="dept">
				<div class="content">
					<avue-crud
						ref="crud"
						v-model="form"
						:option="option"
						:data="data"
						:page="page"
						@on-load="getList"
						:table-loading="tableLoading"
						@row-save="handleSave"
						:before-open="handleOpenBefore"
						@search-change="searchChange"
						@refresh-change="refreshChange"
					>
						<template #parentId-form>
							<avue-input-tree
								checkStrictly
								filterable
								placeholder="请选择 上级支路"
								:dic="treeData"
								:props="treeDataProps"
								v-model="form.parentId"
							></avue-input-tree>
						</template>
						<template #menu="scope">
							<el-button
								link
								type="primary"
								@click="
									() => {
										(this.title = '新增'), (this.showDialog = true), (this.rowForm.parentId = scope.row.id), (this.rowForm.name = '');
									}
								"
								>新增
							</el-button>
							<el-button
								link
								type="primary"
								@click="
									() => {
										(this.title = '修改'), (this.showDialog = true), (this.rowForm = scope.row), (this.rowForm.name = scope.row.branchName);
									}
								"
								>修改
							</el-button>
							<el-button link type="primary" @click="showBjDialog(scope.row)">关联表计 </el-button>
							<el-button link type="primary" @click="rowDel(scope.row)">删除 </el-button>
						</template>
					</avue-crud>
				</div>
			</div>

			<el-dialog :title="title" v-model="showDialog" width="50%">
				<el-form ref="rowForm" :model="rowForm" :rules="rules" label-width="100px" size="small">
					<el-row>
						<el-col :span="12">
							<el-form-item label="上级支路:" prop="parentId">
								<el-tree-select
									style="width: 350px"
									:data="treeData"
									:props="treeDataProps"
									v-model="rowForm.parentId"
									value-key="id"
									check-strictly
									default-expand-all
									placeholder="选择上级支路"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="支路名称:" prop="name">
								<el-input v-model="rowForm.name" placeholder="请输入支路名称" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div style="margin-top: 10px; display: flex; justify-content: end">
					<span slot="footer" class="dialog-footer">
						<el-button @click="showDialog = false">取 消</el-button>
						<el-button type="primary" @click="rowSave">保 存</el-button>
					</span>
				</div>
			</el-dialog>
			<!-- 关联表计-->
			<el-dialog title="关联表计" v-model="showBj" width="50%">
				<el-form ref="bjForm" :model="bjForm" label-width="100px">
					<el-row>
						<el-col :span="24">
							<el-form-item label="所有表计:">
								<el-select
									style="width: 90% !important"
									collapse-tags
									collapse-tags-tooltip
									v-model="bjForm.devArr"
									multiple
									placeholder="请选择表计"
									value-key="unitNo"
									@change="devChange"
								>
									<el-option v-for="item in devData" :key="item.unitNo" :label="item.unitName" :value="item"> </el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-transfer
						style="margin-left: 100px; margin-top: 20px"
						:titles="['支路内所有表计', '本节点计量表计']"
						v-model="bjForm.arr"
						:data="regionData"
					>
					</el-transfer>
				</el-form>
				<div style="margin-top: 10px; display: flex; justify-content: end">
					<span slot="footer" class="dialog-footer">
						<el-button @click="showBj = false">取 消</el-button>
						<el-button type="primary" @click="bjSave">保 存</el-button>
					</span>
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
import { fetchList, addList, delList, editList, getDimbranch, addDimbranch, getMeter } from '/@/api/consumptionmanagement/dimconfig/branch';

export default {
	data() {
		return {
			data: [],
			tableLoading: false,
			deptObj: {},
			form: {
				factor: 1,
			},
			bjForm: {},
			fqForm: {},
			checked3: true,
			checked4: false,
			areaData: [],
			showBj: false,
			showFq: false,
			devData: [],
			regionData: [],
			rowForm: {},
			rules: {
				parentId: [{ required: true, message: '请选择上级支路', trigger: 'blur' }],
				name: [{ required: true, message: '请输入支路名称', trigger: 'blur' }],
			},
			title: '新增',
			showDialog: false,
			treeData: [
				{
					id: '0',
					branchName: '根节点',
					children: [],
				},
			],
			treeDataProps: {
				label: 'branchName',
				value: 'id',
			},
			areaDataProps: {
				label: 'name',
				value: 'id',
			},
			searchForm: {},
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
			},
			loadingTree: false,
			option: {
				index: false,
				searchMenuSpan: 12,
				searchLabelWidth: 'auto',
				searchMenuPosition: 'left',
				addBtn: true,
				editBtn: false,
				delBtn: false,
				columnBtn: false,
				menuWidth: 300,
				searchSpan: 4,
				refreshBtn: true,
				gridBtn: false,
				column: [
					{
						label: '上级支路',
						type: 'select',
						prop: 'parentId',
						hide: true,
						rules: [
							{
								required: true,
								trigger: 'blur',
								message: '上级支路必填',
							},
						],
					},
					{
						label: '支路名称',
						type: 'input',
						prop: 'branchName',
						rules: [
							{
								required: true,
								trigger: 'blur',
								message: '支路名称必填',
							},
						],
					},
					{
						label: '参与计量设备',
						prop: 'devBranchNameStr',
						addDisplay: false,
						editDisplay: false,
						overHidden: true,
						type: 'select',
					},
				],
			},
		};
	},
	mounted() {},
	watch: {
		checked3(n, o) {
			let allNodes = this.$refs.deptTreeRef.store.nodesMap;
			if (allNodes) {
				for (let x in allNodes) {
					allNodes[x].expanded = n;
				}
			}
		},
		checked4(n, o) {
			if (n) {
				this.$refs.deptTreeRef.setCheckedNodes(this.areaData);
			} else {
				this.$refs.deptTreeRef.setCheckedNodes([]);
			}
		},
	},
	methods: {
		refreshChange() {
			this.getList();
		},
		handleOpenBefore(done, type) {
			this.devModel = '';
			done();
		},
		searchChange(form, done) {
			this.searchForm = form;
			this.page.currentPage = 1;
			this.getList(this.page, form);
			done();
		},
		//初始化表格数据
		getList(page, params) {
			// this.tableLoading = true;
			fetchList().then((res) => {
				this.data = res.data ? res.data : [];
				this.treeData = [];
				const arr = { id: '0', branchName: '根节点', children: [...this.data] };
				this.treeData.push(arr);
				this.tableLoading = false;
			});
		},
		handleSave: function (row, done, loading) {
			const params = {
				parentId: row.parentId,
				branchName: row.branchName,
			};
			addList(params)
				.then((data) => {
					this.$message.success('添加成功');
					done();
					this.getList();
				})
				.catch(() => {
					loading();
				});
		},
		rowSave() {
			this.$refs['rowForm'].validate((valid) => {
				if (valid) {
					if (this.title == '新增') {
						const params = {
							parentId: this.rowForm.parentId,
							branchName: this.rowForm.name,
						};
						addList(params)
							.then((data) => {
								this.$message.success('添加成功');
								this.showDialog = false;
								this.getList();
							})
							.catch((e) => {
								this.$message.success(e);
							});
					} else {
						const params = {
							id: this.rowForm.id,
							parentId: this.rowForm.parentId,
							branchName: this.rowForm.name,
						};
						editList(params)
							.then((data) => {
								this.$message.success('修改成功');
								this.showDialog = false;
								this.getList();
							})
							.catch((e) => {
								this.$message.success(e);
							});
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		rowDel: function (row, index) {
			this.$confirm('是否确认删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delList([row.id]);
				})
				.then((data) => {
					this.$message.success('删除成功');
					this.getList();
				})
				.catch((cancelorerror) => {});
		},
		showBjDialog(row) {
			getMeter({ parentId: row.parentId }).then((res) => {
				this.devData = res.data;
			});
			//回显
			this.deptObj = row;
			this.regionData = [];
			this.bjForm.arr = [];
			this.bjForm.devArr = [];
			getDimbranch(row.id).then((res) => {
				this.bjForm.devArr = res.data.devBranchMapList?.map((item) => {
					return {
						unitNo: item.unitNo,
						unitName: item.unitName,
						isStatistic: item.isStatistic,
						id: item.id,
					};
				});
				const arr = this.bjForm.devArr ? this.bjForm.devArr : [];
				for (let i = 0; i < arr.length; i++) {
					this.regionData.push({
						key: arr[i].unitNo,
						id: arr[i].id,
						label: arr[i]?.unitName,
						disabled: false,
					});
					if (arr[i].isStatistic == 1) {
						this.bjForm.arr.push(arr[i].unitNo);
					}
				}
			});
			this.showBj = true;
		},
		devChange() {
			this.regionData = [];
			const arr = this.bjForm.devArr;
			for (let i = 0; i < arr.length; i++) {
				this.regionData.push({
					key: arr[i].unitNo,
					id: arr[i].id,
					label: arr[i]?.unitName,
					disabled: false,
				});
			}
		},
		bjSave() {
			this.$refs['bjForm'].validate((valid) => {
				if (valid) {
					let a = this.bjForm.devArr ? this.bjForm.devArr : []; //下拉框选中的数据
					let b = this.bjForm.arr; //参与计量的数据
					for (let i = 0; i < a.length; i++) {
						if (b.indexOf(a[i].unitNo) != -1) {
							a[i].isStatistic = 1;
						} else {
							a[i].isStatistic = 0;
						}
					}
					const params = {
						id: this.deptObj.id,
						devBranchMapList: a,
					};
					addDimbranch(params)
						.then((data) => {
							this.$message.success('保存成功');
							this.showBj = false;
							this.getList();
						})
						.catch((e) => {
							this.$message.success(e);
						});
				}
			});
		},
	},
};
</script>
<style scoped lang="scss">
:deep(.el-transfer-panel) {
	width: 35%;
}
.dept {
	padding: 10px;
	.demo-tabs > .el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}
	.demo-tabs .custom-tabs-label .el-icon {
		vertical-align: middle;
	}
	.demo-tabs .custom-tabs-label span {
		vertical-align: middle;
		margin-left: 4px;
	}
	.content {
		margin-top: 10px;
		height: 70vh;
		overflow-y: scroll;
	}
}
</style>
